<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.main{
				width: 200px;
				height: 280px;
				margin: 50px auto;
				background: url(img/4a15d8883775742e3efbb850ae14def7.png); 
			}
			h1{
			   color: #fff;
			   text-align: center;
			    padding-top: 40px;
			}
			h4{
				padding-top:50px ;
				color: #FFFFFF;
				text-align: center;
			}
			button{
				width: 40px;
				height: 40px;
				background: #000;
				margin-left: 12px;
				border: 0;
				font-size: 18px;
				color: #FFFFFF;
			}
			span{
				font-weight: bold;
				color: #fff;
				font-size: 23px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<h1>京东秒杀</h1>
			<h4>22:00点场倒计时</h4>
			<p>
				<button id="a">00</button>
					<span>:</span>
				<button id="b">00</button>
				<span>:</span>
				<button id="c">00</button>
			</p>
		</div> 

		<script>

            //一直执行的计时器
            //知道什么时间截止
            //用剩余的时间算出，多少小时，多少分钟，多少秒
            
            //设置结束时间
            var endtime=new Date('2019-09-05 22:00:00')
            
            //设置当前的秒数
            var a=0;
            var b=0;
            var c=0;
            
            //定义一个秒杀函数
            function seckill(){
            	//获取当前时间
            	var nowtime=new Date();
            	//获取相差多少秒
            	var disparity=endtime.getTime()-nowtime.getTime();
            	//相差的毫秒数
				//console.log(disparity);
				//相差的秒数
				disparity=disparity/1000;
				//console.log(disparity);
				//取整
				disparity=parseInt(disparity);
				//console.log(disparity);
				
				if (disparity >=0) {
					//根据剩余的秒数，算出剩余的小时
					a=parseInt(disparity /3600);
					//根据剩余的秒数，算出剩余的分钟
					b=parseInt((disparity/60)%60);
					//根据剩余的秒数，算出剩余的秒数
					c=parseInt(disparity %60);
					
					//利用2位数标书剩余的时间，如果小于10，就给前面加一个0
					if (a < 10) {
						a='0'+a;
					}
					
					if(b < 10){
						b = '0' + b;
					}
					if(c < 10 ){
						c = '0' + c
					}
				} else{
					console.log('秒数结束，清除计时器');
					clearInterval(t);
				}
				
				//将剩余的时分秒，添加到网页的指定位置
				document.querySelector('#a').innerHTML=a;
				document.querySelector('#b').innerHTML=b;
				document.querySelector('#c').innerHTML=c;
            }
            //预先执行一遍这个函数
            seckill();
            
            
            var t= setInterval(function(){
            	//每秒执行一次这个函数
            	seckill();
            },1000)
		</script>
	</body>
</html>
